<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网站导航</title>
        <style type="text/css">
            div{
                margin: 0;
                padding: 0;
                height: 15px;
                background-color: darkmagenta;
            }
            ul{
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: darkmagenta;
            }
            li{
                float: left;
            }
            li a{
                display: block;
                color: white;
                text-align: center;
                text-decoration: none;
                padding-top: 5px;
                padding-bottom: 5px;
                padding-left: 50px;
                padding-right: 50px;
            }
            li a:hover{
                background-color: red;
                font-size: x-large;
            }
        </style>
    </head>

    <body>
        <div></div>
        <ul>
            <li><a href="#home">网站导航1</a></li>
            <li><a href="#news">网站导航2</a></li>
            <li><a href="#contact">网站导航3</a></li>
            <li><a href="#about">网站导航4</a></li>
            <li><a href="#about">网站导航5</a></li>
            <li><a href="#about">网站导航6</a></li>
            <li><a href="#about">网站导航7</a></li>
          </ul>
    </body>
</html>